<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
</head>
<style>
    a{
        text-decoration: none;/*去下划线*/
        color: blue;
        font-size: 18px;
        font-weight: bold;/*字体加粗*/
        color: pink;
       display: inline-block; /*行内元素变为块元素 这样就能对其进行宽高的人为改变,使得width和heigth生效*/
        width: 40px;
        height: 40px;
        background: #000033;
        line-height: 40px;/*垂直居中*/
       text-align: center; /*水平居中*!*/
        border-radius: 10px;/*圆角*/
    }
    a[id]{
        background: yellow;
    }
    a[href="test"]{
        background: #1F87CC;
    }
    a[href^="http://"]{
        background: #FAA53B;
    }
    a[href$=".com"]{
        background: darkslategrey;
    }
    a[href*="#"]{
        background: #FAA53B;
    }
</style>
<!--/*属性选择器	功能描述*/&ndash;&gt;-->
<!--/*E[attr]	选择匹配具有属性attr的E元素*/-->
<!--/*E[attr=val]	选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）*/-->
<!--/*E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串*/-->
<!--/*E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串*/-->
<!--/*E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配-->
<body>
<a href="111" id="a1">1</a>
<a href="test">2</a>
<a href="#">3</a>
<a href="test">4</a>
<a href="http://123">5</a>
<a href="http://456">6</a>
<a href="http://123456.com">7</a>
<a href="http://789456.com">8</a>
<a href="#">9</a>
<a href="#" id="a1">10</a>
</body>
</html>